import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl } from 'react-intl';
import { Pane, PaneHeader, Paneset, NavListItem, NavListSection, Icon } from '@folio/stripes/components';
import { stripesConnect,IfPermission} from '@folio/stripes/core';
import RouterModel from './routes-model/index';
import '../css/base.css';
import css from './style.css';

class RoutesMain extends React.Component {
    static propTypes = {
      match: PropTypes.object.isRequired,
      location: PropTypes.object.isRequired,
    };

    constructor(props) {
      super(props);

      this.state = {
        // eslint-disable-next-line react/no-unused-state
        content:[],
        // eslint-disable-next-line react/no-unused-state
        modelList:RouterModel,
        // eslint-disable-next-line react/no-unused-state
        modelObject:{ key:'', model:<div key="div-tmp-sfldwkoer" /> }
      };
    }

    componentWillReceiveProps(nextProps) {
      const { location } = nextProps;

      const key = location.pathname;
      const modelList = this.state.modelList;
      if (key) {
        modelList.forEach((item) => {
          if (key == item.key) {
            this.infoModel(key);
          }
        });
      }
    }

    componentDidMount() {
      this.infoModel('/party/info/list');

      // let list = []
      // RouterModel.forEach((item)=>{
      //   // let tmp = {
      //   //   permissionName : item.perm,
      //   //   displayName :  item.name,
      //   //    visible : true
      //   // }
      //     list.push(item.perm)
      //
      // })
      // const perm = JSON.stringify(list, null, 4);
      // console.dir(perm,{colors:true})

    }

    infoModel=(key, params = { id:'' }) => {
      //const {stripes} = this.props
      this.setState((pre) => {
        const content = pre.content;
        const modelList = pre.modelList;
        const modelObject = pre.modelObject;
        let flag = false;
        content.forEach((a) => {
          a.selected = false;
          if (a.key === key) {
            flag = true;
            a.selected = true;
          }
        });
        if (flag) {
          modelList.forEach((pageObject) => {
            if (pageObject.key === key) {
              pageObject.selected=true
             }else{
              pageObject.selected=false
            }

          });
          return {
            content,
            modelList
          };
        }else{
          modelList.forEach((pageObject) => {
            if (pageObject.key === key) {
              const tmp = { ...pageObject };
              tmp.selected = true;
              tmp.params = params;
              pageObject.selected=true
              //console.log(stripes.hasPerm(tmp.perm))
              content.push(tmp);
            }else{
              pageObject.selected=false
            }

          });

          return {
            content,
            modelObject,
            modelList
          };
        }

      });
    }

    openTopMenu=(key) => {
      if (key) {
        this.setState((pre) => {
          const content = pre.content;
          content.forEach((data) => {
            data.selected = false;
            if (data.key === key) {
              data.selected = true;
            }
          });
          pre.modelList.forEach((pageObject) => {
            if (pageObject.key === key) {
              pageObject.selected=true
            }else{
              pageObject.selected=false
            }

          });
          return {
            content,
          };
        });
      }
    }

    removeTopMenu=(key, flag = true) => {
      if (key) {
        if (flag) {
          if (!confirm('确定要关闭这个页面？')) {
            return false;
          }
        }
        this.setState((pre) => {
          const content = pre.content;
          const newContent = [];
          const modelList = pre.modelList;
          const modelObject = pre.modelObject;

          for (let i = 0; i < content.length; i++) {
            content[i].selected = false;
            if (content[i].key !== key) {
              newContent.push(content[i]);
            }
          }

          if (newContent.length > 0) {
           let menu=newContent[newContent.length - 1];
            menu.selected = true
            pre.modelList.forEach((pageObject) => {
              if (pageObject.key === menu.key) {
                pageObject.selected=true
              }else{
                pageObject.selected=false
              }

            });
          }else if(newContent.length === 0){
            pre.modelList.forEach((pageObject) => {

                pageObject.selected=false


            });
          }
          // eslint-disable-next-line consistent-return
          return {
            content: newContent,
            modelObject,
            modelList
          };
        });
      }
    }

    render() {
      return (
        <Paneset>
          <Pane defaultWidth="15%" paneTitle="活动平台">
            <NavListSection>
              {
                this.state.modelList.filter(item => item.isTop === true).map((item) => {
                   return <IfPermission perm={`${item.perm}`}> <NavListItem onClick={() => { this.infoModel(item.key); }} style={{ color: item.selected ? '#070' : '#2b75bb'}}><FormattedMessage id={`ui-party.${item.name}`} /></NavListItem></IfPermission> ;
                })
              }

            </NavListSection>
          </Pane>
          <Pane
            defaultWidth="fill"

            renderHeader={(renderProps) => <PaneHeader

              firstMenu={this.state.content.map((item) => {
                return (
                  <div
                    key={item.key + '-dasdak-sdmlasd-lqwoek-xasd'}
                    className={item.selected ? css.topMenuDivUp : css.topMenuDivDow}

                  >
                    <span onClick={() => { this.openTopMenu(item.key); }}>
                      <FormattedMessage id={`ui-party.${item.name}`} />
                    </span>
                    <span className={css.divSpanIcon} onClick={() => this.removeTopMenu(item.key)}>
                      <Icon icon="times-circle" size="small" />
                    </span>
                  </div>
                );
              })}
            />}
          >

            {
              this.state.content.map((pageObject) => {
                return (
                  <div key={pageObject.key + 'sidwkdlasdmlasd_weqw!'} style={{ display:pageObject.selected ? 'block' : 'none', width:'100%' }}>
                    <pageObject.model {...this.props} toModel={this.infoModel} removeTopMenu={this.removeTopMenu} params={pageObject.params} name={pageObject.name} matchPath={pageObject.key} />
                  </div>
                );
              })
            }

          </Pane>
        </Paneset>
      );
    }
}
export default injectIntl(stripesConnect(RoutesMain));
